import React,{useState,useEffect} from 'react';
import "@/views/Index/Index.scss"
import {Outlet, useNavigate} from 'react-router-dom'
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    UserOutlined,
    MenuOutlined,
    GoogleOutlined
  } from '@ant-design/icons';
  import type { MenuProps } from 'antd';
  import { Dropdown, Layout, Menu, theme,Space,Avatar } from 'antd';
import { useSelector,useDispatch } from 'react-redux';
import { Navigate } from 'react-router-dom';
import { admin_detail } from '../../api/api'
import SubMenu from 'antd/es/menu/SubMenu';

  
const { Header, Content, Footer, Sider } = Layout;

// type MenuItem = Required<MenuProps>['items'][number];
interface Props {

}
interface MenuItem{
    item:object
    key:string
}
 

function Index(props:Props) {
    // 获取仓库中的数据
    var name = useSelector((state: any) => state.name)
    var pathname = useSelector((state:any)=> state.pathname)
    var userinfo = useSelector((state:any)=>state.userinfo)
    // var openKey = useSelector((state:any)=> state.key)
    var dispatch = useDispatch()
    var [key,setKey] = useState('')
    var navigate = useNavigate()
    var handleClick = function({ item,key }:MenuItem){
        // console.log(key);
        navigate( key )
        dispatch({type:'PATH',payload:key})
        
    }
    var handle = ()=>{
        setKey(key)
        console.log(key);

    }
    // var openClick = (key:string)=>{
    //     console.log(key);
        
    //     dispatch({type:'KEY',payload:key})
    // }
    // useEffect(()=>{
    //   admin_detail({adminname:name}).then((res)=>{
    //     console.log(res.data.data);
    //     dispatch({type:'USER',payload:res.data.data[0].checkedKeys})
        
    //   })
    // },[])
    const [collapsed, setCollapsed] = useState(false);
    const {
      token: { colorBgContainer },
    } = theme.useToken();

      
    //退出登录
      
        var exit = ()=>{
          localStorage.removeItem('token')
          localStorage.removeItem('checkedKeys')
          navigate('/login');
      
        }

    const dropmenuitems: any = [
      {
        key: '1',
        label: <a target="_blank" rel="noopener noreferrer"> 设置 </a>,
      },
      {
        key: '2',
        label: <a onClick={()=>{ exit() }} rel="noopener noreferrer"> 退出 </a>
      }
    ];
    return (
        <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
          <div className='box' style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} >
          {
                        !collapsed && 
                        <div className='title'>
                            <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                            <span>嗨购管理系统</span>
                        </div>
                    }
          </div>
          {/* <Menu theme="dark" defaultSelectedKeys={[key]} mode="inline" items={items} /> */}
          <Menu theme='dark' mode='inline'  defaultSelectedKeys={[pathname]} defaultOpenKeys={[key]} onClick={handleClick} onChange={handle}>
                            <Menu.Item key='/index/home' icon={<GoogleOutlined />}>
                              首页
                            </Menu.Item>
                            <Menu.SubMenu key='1' title='轮播图管理' icon={<PieChartOutlined />} >
                                <Menu.Item key="/index/swiper" >轮播图列表</Menu.Item>
                            </Menu.SubMenu>
                            <Menu.SubMenu key='2' title='账号管理' icon={<UserOutlined />} >
                                <Menu.Item key="/index/users" >管理员列表</Menu.Item>
                            </Menu.SubMenu>
                            <Menu.SubMenu key='3' title='产品管理' icon={<DesktopOutlined />}>
                                <Menu.Item key="/index/shopinfo" >产品列表</Menu.Item>
                                <Menu.Item key="/index/seckill" >秒杀列表</Menu.Item>
                                <Menu.Item key="/index/recommend" >推荐列表</Menu.Item>
                                <Menu.Item key="/index/sift" >筛选列表</Menu.Item>
                            </Menu.SubMenu>

                            <Menu.SubMenu key='4' title='数据可视化' icon={<FileOutlined/>}>
                                <Menu.Item key="/index/echarts" >Echarts图表</Menu.Item>
                                <Menu.Item key="/index/order" >用户订单</Menu.Item>
                            </Menu.SubMenu>
                            <Menu.SubMenu key='5' title='编辑器' icon={<FileOutlined/>}>
                                <Menu.Item key="/index/editor" >富文本编辑器</Menu.Item>
                            </Menu.SubMenu>
                            <Menu.SubMenu key='6' title='Execl管理' icon={<FileOutlined/>}>
                                <Menu.Item key="/index/systemmanage/timing" >编辑器</Menu.Item>
                            </Menu.SubMenu>
                            <Menu.SubMenu key='7' title='地图管理' icon={<FileOutlined/>}>
                                <Menu.Item key="/index/map" >百度地图</Menu.Item>
                            </Menu.SubMenu>

          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header style={{ padding: 0, background: colorBgContainer }} >
          <MenuOutlined />
          <div className="info">
            <span>欢迎您 {name}</span>
            <Dropdown menu={{ items:dropmenuitems }}>
                                <a onClick={(e) => e.preventDefault()}>
                                    <Space>
                                        <UserOutlined />
                                    </Space>
                                </a>
                            </Dropdown>
          </div>
          </Header>
          {/* 面包屑 */}
          {/* <MyBread/> */}
          <Content style={{ margin: '0 16px' }}>
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout>
    );
}

export default Index;